<template>
  <div class="exeRecord">
    <el-card shadow="never" class="recordTop">
      <el-row class="search" :gutter="10">
        <el-col :span="10">
          <el-input v-model="inputstr" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="search">
          <el-button
            type="primary"
            plain
            style="width: 100%"
            icon="el-icon-search"
            @click="onSearch"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never" class="record">
      <el-table :data="exeRecord" style="width: 100%" stripe border>
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="excutnum" label="执行批次" width="180">
        </el-table-column>
        <el-table-column prop="planName" label="计划名" width="200" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="caseCount" label="用例总数" width="80">
        </el-table-column>
        <el-table-column prop="passCount" label="通过条数" width="80">
        </el-table-column>
        <el-table-column prop="failCount" label="失败条数" width="80">
        </el-table-column>
        <el-table-column label="响应时间" align="center">
          <el-table-column
            prop="thrCount"
            label="0.3s<=t<0.5s"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="sevCount"
            label="0.5s<=t<1s"
            width="115"
          ></el-table-column>
          <el-table-column
            prop="secCount"
            label="1s<= t"
            width="100"
          ></el-table-column>
        </el-table-column>

        <el-table-column prop="passRatio" label="通过率" width="100">
        </el-table-column>
        <el-table-column prop="" label="执行时间" width="170">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              myDate(scope.row.create_time)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_user" label="执行者" width="70">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="测试结果"
              placement="top-start"
            >
              <el-button
                type="success"
                icon="el-icon-s-operation"
                circle
                size="mini"
                @click="viewReports(scope.row.excutnum)"
              >
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getExeRecord } from "@/network/networks";
import { myDate } from "@/assets/js/common";
export default {
  data() {
    return {
      exeRecord: [],

      //查询条件
      inputstr: "",
      //page分页
      currentPage: 1, //当前页
      totalCount: 0, //总数量
      pageSize: 10, //数量/页
    };
  },

  mounted() {
    this.getRocord();
  },

  methods: {
    onSearch() {
      this.getRocord();
    },

    //获取执行记录
    getRocord() {
      getExeRecord({
        inputstr: this.inputstr,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
      })
        .then((res) => {
          if (res.code == 1) {
            this.exeRecord = res.data.exeRecord;
            this.totalCount = res.data.totalCount;
            this.repassRatio()
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },


    repassRatio() {
          for(var i = 0; i < this.exeRecord.length; i ++) {
              this.exeRecord[i].passRatio = Math.round(this.exeRecord[i].passCount / this.exeRecord[i].caseCount * 10000) / 100.00 + "%"
              if (this.exeRecord[i].passRatio == 'NaN%'){
                  this.exeRecord[i].passRatio = 0
              }
          }
      },

    viewReports(excutnum){
      //打开计划执行记录页面，传入id与name
      this.$router.push({
        path: "/planexerep",
        name: "PER",
        query: {
          excutnum: excutnum,
        },
      });
    },

    //设置每页多少条
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getRocord();
    },

    //切换页数据
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getRocord();
    },

    myDate(time) {
      return myDate(time);
    },
  },
};
</script>

<style lang="less" scoped>
.record {
  margin-top: 15px;
}
</style>